
import React, {Fragment} from "react";
import {Avatar, Modal} from "antd";

class FormatPic extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            //图片预览弹窗
            previewVisible:false,
            //图片预览地址
            previewImage:""
        }
    }

    render() {
        try{
            let pics = JSON.parse(this.props.record);
            return (
                <Fragment>
                    {Array.isArray(pics) && pics.map((item,index) => {
                        if (item.hasOwnProperty("url") || item.hasOwnProperty("thumbUrl")){
                            let src = item["thumbUrl"] ? item["thumbUrl"] : item["url"];
                            if (index === 0){
                                return <Avatar key={index} onClick={() => {this.setState({previewVisible:true,previewImage:item["url"]})}} src={src} shape="square" size={this.props.size ? this.props.size : 32}/>
                            }else {
                                return <Avatar key={index} onClick={() => {this.setState({previewVisible:true,previewImage:item["url"]})}} style={{marginLeft:"10px"}} src={src} shape="square" size={this.props.size ? this.props.size : 32}/>
                            }
                        }else {
                            return "无效的图片";
                        }
                    })}
                    <Modal visible={this.state.previewVisible} footer={null} onCancel={() => {this.setState({previewVisible:false})}}>
                        <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
                    </Modal>
                </Fragment>
            );
        }catch (e) {
            return "无效的图片";
        }
    }
}

export default FormatPic;
